<template>
  <div class="app-container fjxxView">
    <el-form ref="form" :model="form" :rules="rules" >
      <BorderView title="附加信息" />
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item label="填表人*" label-class-name="labelBg">
          <el-form-item prop="tbr">
            <el-input v-model="form.tbr" placeholder="请输入填表人" clearable />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="填表时间*" label-class-name="labelBg">
          <el-form-item prop="tbsj">
            <el-date-picker
              v-model="form.tbsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择填表时间"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="填表单位*" label-class-name="labelBg">
          <el-form-item prop="tbdw">
            <el-input
              v-model="form.tbdw"
              placeholder="请输入填表单位"
              clearable
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="审核人*" label-class-name="labelBg">
          <el-form-item prop="shenheren">
            <el-input
              v-model="form.shenheren"
              placeholder="请输入审核人"
              clearable
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="审核时间*" label-class-name="labelBg">
          <el-form-item prop="shsj">
            <el-date-picker
              v-model="form.shsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择审核时间"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="审核单位*" label-class-name="labelBg">
          <el-form-item prop="shsj">
            <el-input
              v-model="form.shdw"
              placeholder="请输入审核单位"
              clearable
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话*" label-class-name="labelBg">
          <el-form-item prop="lxdh">
            <el-input
              v-model="form.lxdh"
              placeholder="请输入联系电话"
              clearable
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="社区戒毒社区康复人员签字时间(档案)*"
          label-class-name="labelBg"
        >
          <el-form-item prop="sqjdsqkfryqzsj">
            <el-date-picker
              v-model="form.sqjdsqkfryqzsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择社区戒毒社区康复人员签字时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="社区戒毒社区康复工作小组成员签字时间(档案)*"
          label-class-name="labelBg"
        >
          <el-form-item prop="sqjdsqkfgzxzcyqzsj">
            <el-date-picker
              v-model="form.sqjdsqkfgzxzcyqzsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择社区戒毒社区康复工作小组成员签字时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item
          label="社区戒毒社区康复工作站负责人签字时间*"
          label-class-name="labelBg"
        >
          <el-form-item prop="sqjdsqkfgzzfzrqzsj">
            <el-date-picker
              v-model="form.sqjdsqkfgzzfzrqzsj"
              clearable
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择社区戒毒社区康复工作站负责人签字时间"
              style="width: 100%"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div
      slot="footer"
      class="dialog-footer"
      style="text-align: right; margin-top: 20px"
    >
      <el-button @click="cancel">重置</el-button>
      <el-button :loading="buttonLoading" type="primary" @click="submitForm"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script>
import {
  getUser,
  addUser,
  updateUser,
} from "@/api/user/userInfo";
import BorderView from "@/views/components/BorderTitleView/index.vue";
export default {
  dicts: ["fxdj", "jntc"],
  components: {
    BorderView,
  },
  props: {
    sjskId: {
      type: String,
    },
  },
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 表单参数
      form: {},
      // 表单校验

      rules: {
        tbr: [{ required: true, message: "填表人不能为空", trigger: "blur" }],
        tbsj: [
          { required: true, message: "填表时间不能为空", trigger: "blur" },
        ],
        tbdw: [
          { required: true, message: "填表单位不能为空", trigger: "blur" },
        ],
        shenheren: [
          { required: true, message: "审核人不能为空", trigger: "blur" },
        ],
        shsj: [
          { required: true, message: "审核时间不能为空", trigger: "blur" },
        ],
        shdw: [
          { required: true, message: "审核单位不能为空", trigger: "blur" },
        ],
        lxdh: [
          { required: true, message: "联系电话不能为空", trigger: "blur" },
        ],
        sqjdsqkfryqzsj: [
          {
            required: true,
            message: "社区戒毒社区康复人员签字时间不能为空",
            trigger: "blur",
          },
        ],
        sqjdsqkfgzxzcyqzsj: [
          {
            required: true,
            message: "社区戒毒社区康复工作小组成员签字时间不能为空",
            trigger: "blur",
          },
        ],
        sqjdsqkfgzzfzrqzsj: [
          {
            required: true,
            message: "社区戒毒社区康复工作站负责人签字时间不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    sjskId: {
      immediate: true,
      handler(newV) {
        if (newV) {
          getUser(newV).then((res) => {
            if (res.data) {
              this.form = res.data;
            } else {
              this.reset();
            }
          });
        }
      },
    },
  },

  methods: {
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          updateUser(this.form)
            .then((response) => {
              this.$modal.msgSuccess("修改成功");
            })
            .finally(() => {
              this.buttonLoading = false;
            });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        sjskFjxxId: undefined,
        tbr: undefined,
        tbsj: undefined,
        tbdw: undefined,
        shenheren: undefined,
        shsj: undefined,
        shdw: undefined,
        lxdh: undefined,
        sqjdsqkfryqzsj: undefined,
        sqjdsqkfgzxzcyqzsj: undefined,
        sqjdsqkfgzzfzrqzsj: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
      };
      this.resetForm("form");
    },
  },
};
</script>
<style>
.labelBg {
  background: rgb(241, 243, 244) !important;
  color: #000;
}
</style>
<style scoped>
.fjxxView /deep/.el-descriptions--small.is-bordered .contentBg {
  padding: 0 !important;
}
.fjxxView .el-input__wrapper {
  border: none !important;
  box-shadow: none !important;
  padding: 0px;
}
.fjxxView /deep/ .el-input__inner {
  border: none !important;
}
.fjxxView /deep/ .el-textarea__inner {
  border: none !important;
}
.fjxxView /deep/ .el-form-item {
  margin-bottom: 0;
}
</style>
